<template>
  <div v-cloak>
    <el-form
      :model="author"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
    <el-form-item label="笔名" prop="pen_name">
        <el-col :span="8">
          <el-input v-model="author.pen_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="作者姓名" prop="user_name">
        <el-col :span="8">
          <el-input v-model="author.user_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="账号" prop="user_account">
        <el-col :span="8">
          <el-input v-model="author.user_account"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="密码" prop="user_pwd">
        <el-col :span="8">
          <el-input v-model="author.user_pwd"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="邮箱" prop="user_email">
        <el-col :span="10">
          <el-input v-model="author.user_email"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="等级" prop="grade">
        <el-col :span="11">
          <el-select v-model="author.grade">
            <el-option label="普通用户 " value="user"></el-option>
            <el-option label="作家 " value="author"></el-option>
            <el-option label="管理员 " value="admin"></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="描述" prop="user_desc">
        <el-col :span="11">
          <el-input type="textarea" v-model="author.user_desc"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="头像">
        <el-col :span="10">
            <el-image :lazy='true' v-if="author.user_cover" :src="author.user_cover" fit="cover" style="width: 200px; height: 200px"></el-image>
                    <el-upload class="avatar-uploader" 
                          :action="$http.defaults.baseURL + 'upload'" 
                          accept="image/jpeg,image/gif,image/png"
                          :show-file-list="false" 
                          :on-success="afterUpload" 
                          :data="{user_id: author.user_id}"
                          :before-upload="beforeAvatarUpload">
                        <button type="button" class="el-button filter-item el-button--primary" style="margin-top:10px">
                            <i class="fa fa-cloud-upload" aria-hidden="true"></i><span>上传头像</span>
                        </button>
                    </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"
          >立即创建</el-button
        >
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

export default {
  data() {
    return {
      author:{
        user_cover:'',
        user_name:'',
        user_account:'',
        grade:'',
        user_pwd:'',
        user_desc:'',
        pen_name:'',
        user_email:''
      },
    };
  },
  mounted() {
  },
  methods: {
    afterUpload(res){
      // 显示设置personInfo的 user_cover值
      this.$set(this.author, 'user_cover', res.url)
    },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    async submitForm() {
      let res = await this.$http.post('/insert_author',this.author)
      this.$message({
        type:res.data.type,
        message:res.data.message
      })
      this.$router.push('/authorsManage/authorList')
    },
    resetForm() {
      this.author = {}

    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.component-item {
  margin-top: 100px;
}
.code-part {
  margin-top: 20px;
} 
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  i.el-icon-plus{
       border: 1px dashed #d9d9d9;
  }
</style>
